<template>
    <!-- 视频 -->
    <div style="margin-bottom:40px">
        <div class="content" v-if="data !== null">
            <div v-for="item in data" :key="item.vid" class="contentBox">
                <el-card shadow="always" :body-style="{ padding: '0px' }">
                    <div class="count">
                        <i class="el-icon-video-play"></i>{{
                                item.playTime >= 10000
                                    ? (item.playTime / 10000).toFixed(0) + "万"
                                    : item.playTime
                        }}
                    </div>
                    <el-image :src="item.coverUrl" lazy fit="cover" @click="playMv(item)">
                        <div slot="placeholder" class="image-slot">
                            <el-image src="" lazy @click="playMv(item)"></el-image>
                        </div>
                    </el-image>
                    <div class="time">
                        {{
                                Math.floor(
                                    item.durationms / 1000
                                ) | timeFormat
                        }}
                    </div>
                    <div style="padding: 14px">
                        <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                            <div class="desc">
                                {{ item.title }}
                            </div>
                        </el-tooltip>
                    </div>
                </el-card>
            </div>
        </div>
        <div class="block">
            <el-pagination @current-change="handleCurrentChange" :page-size="30" layout="total , prev, pager, next"
                :total="count">
            </el-pagination>
        </div>
        <div class="loading" v-if="show === true">
            <i class="el-icon-loading"></i>
        </div>
    </div>

</template>

<script>
import { mapState, mapActions } from 'vuex';
import debounce from "@/utils/debounce.js";
export default {
    computed: {
        ...mapState(['seachSongItem']),
    },
    mounted() {
        this.keywords = window.sessionStorage.getItem('keywords');
        this.getData();
    },
    watch: {
        seachSongItem(newVal, oldVal) {
            this.keywords = window.sessionStorage.getItem('keywords');
            this.getData();
        },
    },
    data() {
        return {
            keywords: '',
            limit: 30, // 单页数量
            offset: 0, // 页数
            data: null,
            count: null,
            show: false,
        };
    },
    methods: {
        ...mapActions([
            'saveVurl',
            'saveResv',
            'saveVbes'
        ]),
        getData() {
            this.$api
                .search({
                    type: 1014, // 专辑模式
                    keywords: this.keywords,
                    limit: this.limit,
                    offset: this.offset,
                    cookie: localStorage.getItem('cookie'),
                })
                .then((ret) => {
                    this.count = ret.result.videoCount
                    this.data = ret.result.videos
                    console.log(this.data)
                });
        },
        // 翻页
        handleCurrentChange: debounce(function (e) {
            this.keywords = window.sessionStorage.getItem('keywords');
            this.offset = (e - 1) * 30;
            if (this.offset > this.count) {
                this.offset = (e - 1) * 30 - (this.offset - this.count) - 1;
                this.getData();
            } else {
                this.getData();
            }

        }, 1000),

        // 点击播放以后的后续操作
        playMv(e) {
            this.show = true;
            if (e.type === 1) {
                this.getUrl(e.vid);
            }
        },

        // 获取播放地址
        async getUrl(e) {
            this.$api.videoUrl({ id: e, cookie: localStorage.getItem('cookie') }).then((ret) => {
                this.saveVurl({ vUrl: ret.urls[0].url });
            });
            this.getResMv(e);
            this.getItem(e);
        },

        // 获取相似视频
        async getResMv(e) {
            this.$api.allvideo({ id: e, cookie: localStorage.getItem('cookie') }).then((ret) => {
                this.saveResv({ resV: ret.data });
            });
        },

        //获取接触信息
        async getItem(e) {
            this.$api.videoDetail({ id: e, timestamp: this.$utils.timestamp(), cookie: localStorage.getItem('cookie') }).then((ret) => {
                this.saveVbes({ vBes: ret.data });
                this.$router.push(`/videoPage?id=${e}`);
            });

        },
    },
}
</script>

<style scoped>
.content {
    display: flex;
    flex-wrap: wrap;
}

.el-button {
    margin-top: 20px;
    border-radius: 20px !important;
    margin-bottom: 15px;
    height: 40px;
}

.tagBox {
    position: absolute;
    width: 720px;
    height: 200px;
    border: 1px solid #dcdfe6;
    overflow-y: scroll;
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    z-index: 11;
    background: #ffffff;
}

.tag {
    width: 80px;
    cursor: pointer;
    margin-bottom: 20px;
    margin-right: 20px;
    font-size: 16px;
    display: flex;
    justify-content: left;
}

.contentBox {
    margin-right: 5px;
    position: relative;
}

.count {
    position: absolute;
    z-index: 10;
    width: 100%;
    text-align: right;
    color: #fff;
}

.desc {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.el-card {
    margin-bottom: 10px;
    cursor: pointer;
    width: 300px;
    position: relative;
}

.el-card .el-image {
    width: 300px;
    height: 200px;
}

.el-row {
    margin-bottom: 40px;
}

.time {
    position: absolute;
    width: 100%;
    text-align: right;
    color: #fff;
    top: 180px;
}

.more {
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    text-align: center;
}

.loading {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.el-icon-loading {
    position: fixed;
    font-size: 50px;
    left: 50%;
    top: 50%;
    color: #ec4141;
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.right {
    display: flex;
}

.right div {
    margin-right: 5px;
    cursor: pointer;
}
</style>